<template>
  <div class="page">
    <div class="subTop" >
      <ul class="topTab">
        <li v-for="item in tabList" :key="item.key" :class="{'nowTab':tab===item.key}" @click="handleChange(item.key)" >
          {{item.title}}
        </li>
        <span :class="['slideSpan',{'chooseTabSpan':tab==='2'}]" ></span>
      </ul>
    </div>
    <div class="top">
      <div v-if="list.length > 0" v-for="(item, index) in list" :key="index" class="card">
        <div class="msg">
          <span>{{ item.regular_name }}</span>
          <span>{{ item.regular_certid }}</span>
        </div>
        <div class="opearet">
           <span @click="changeCheck(item,index)">
            <img
              :src="item.checked ? mycheckedImg : uncheckedImg"
              class="checked-image"
              alt=""
            /><span>{{item.checked ? '默认就诊人' : '设为默认'}}</span></span>
          <p class="edit">
            <span @click="edit(item)" >
              <img :src="editPeoImg" alt="" />
              编辑
            </span>
            <span v-if="index===0&&tab==='1'" style="opacity:0">
               <img :src="deletePeoImg" alt="" />
              删除
            </span>
            <span @click="deletePeople(item)" v-else>
              <img :src="deletePeoImg" alt="" />
              删除
            </span>
          </p>
        </div>
      </div>
      <div v-if="list.length == 0 && !delayShowData" class="noDataImg">
        <img :src="noDataImg"/>
      </div>
    </div>
    <div class="bottom">
      <p @click="toadd">+新增{{tab==='1'?'':'儿童'}}就诊人</p>
    </div>
    <div class="modal" v-if="visible">
          <div class="out">
              <div class="top" >
                  <span>确定删除该常用就诊人吗？</span>
              </div>
              <div class="btm">
                  <span @click='visible=false'>取消</span>
                  <span @click="deleteOne">确定</span>
              </div>
          </div>
      </div>
    <i-message id="message" />
     <i-toast id="toast" />
  </div>
</template>
<script>
import Bus from "@/utils/bus.js";
import api from '@/api/api'
import storage from '@/utils/storage'
const { $Toast, $Message } = require('../../../../../static/iview/base');
export default {
  data() {
    return {
      list: [],
      radio: "",
      visible: false,
      color: "#258FF8",
      imgUrl: '',
      mycheckedImg: '',
      uncheckedImg: '',
      noDataImg: '',
      editPeoImg: '',
      deletePeoImg: '',
      delayShowData: true,
      tab:'1',
      tabList: [
        {title: '成人', key: '1', count: 0},
        {title: '儿童', key: '2', count: 0}
      ],
    };
  },
  onUnload(){
    // console.log('点击了返回到首页')
    wx.reLaunch({
        url: '/pages/center/main'
    })
    },
  onShow(){
    let pages = getCurrentPages();//当前页面栈
    console.log(pages, 'pages')
    var obj = {}
    this.$storage.setContact(obj)
    this.getList();
    this.imgUrl = api.imgUrl
    this.mycheckedImg = this.imgUrl + 'mychecked.png'
    this.uncheckedImg = this.imgUrl + 'unchecked.png'
    this.editPeoImg = this.imgUrl + 'edit_peo.png'
    this.deletePeoImg = this.imgUrl + 'delete_peo.png'
    this.noDataImg = this.imgUrl + 'noData.png'
    mpvue.removeStorage({
      key: 'cantact'
    })
  },
  mounted() {
    this.getList();
  },
  // 下拉刷新
  onPullDownRefresh: function() {
    this.getList()
  },
  methods: {
    getList() {
      var that = this;
      that.list = []
      that.delayShowData = true
      that.$api
        .user_regular_list({regular_type:that.tab}, { showLoading: true })
        .then(function(data) {
          console.log(data);
          that.list = data.data;
          for (var i = 0; i < that.list.length; i++) {
            if (that.list[i].is_default == "1") {
              that.$set(that.list[i], "checked", true);
            } else {
              that.$set(that.list[i], "checked", false);
            }
          }
          wx.stopPullDownRefresh();
          that.delayShowData = false
        });
    },
    toadd() {
      this.$router.push(`/pages/center/child/addCommon/main?&type=${this.tab}`);
    },
    deletePeople(item) {
      this.regular_id = item.regular_id;
      this.visible = true;
    },
    deleteOne() {
      var that = this;
      let param = {
        regular_id: this.regular_id
      };
      that.$api
        .user_regular_delete(param, { showLoading: true })
        .then(function(data) {
          if(data.code== 0 ){
            $Toast({
                content: '删除成功',
                type: 'warning'
            })
            that.getList()
            that.visible = false
          }else{
            $Toast({
                content: '删除失败',
                type: 'warning'
            })
            that.visible = false
          }
        });
    },
    edit(item) {
      this.$router.push(
        `/pages/center/child/addCommon/main?id=${item.regular_id}&&type=${this.tab}`
      );
    },
    handleChange (value) {
      this.tab = value
      this.getList()
    },
    changeCheck(item,index) {
        console.log(item,index);
        let param = {
            regular_name:item.regular_name,
            regular_id:item.regular_id,
            method_type:1,
            is_default:1
          }
        var that = this
        this.$api.user_regular_save(param, {'showLoading': true}).then(function (data) {
            if(data.code==0){
                $Toast({
                    content: '修改成功',
                    type: 'warning'
                })
                //1把其余置灰
                for(var i = 0;i<that.list.length;i++){
                    if(i==index){
                        that.list[i].checked = true
                    } else {
                        that.list[i].checked = false
                    }
                }

                //2
                item.checked =true
            }else{
                $Toast({
                    content: '修改失败',
                    type: 'warning'
                })
            }
        })
    },
  }
};
</script>
<style lang="less" scoped>
.page {
  width: 100%;
  height: 100%;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  .radio-box radio {
    color: red;
  }
  .subTop {
    height: 90rpx;
    width: 100%;
    background-color: #FFFFFF;
    border-bottom: 1rpx solid #DDDDDD;
    box-sizing: border-box;
    ul {
      position: relative;
      height: 100%;
      list-style: none;
      width: 100%;
      font-size: 30rpx;
      color: #666666;
      display: flex;
      li {
        flex: 1;
        text-align: center;
        line-height: 90rpx;
      }
      .nowTab {
        color: #4B7AEA;
      }
    }
    .slideSpan {
      position: absolute;
      height: 5rpx;
      width: 120rpx;
      background-color: #4B7AEA;
      bottom: 0;
      left: 17%;
      transition: left ease 0.3s;
    }
    .chooseTabSpan {
      left: 68%;
    }
  }
  .top {
    flex: 1;
    overflow-y: scroll;
    .card {
      border-bottom: 16rpx solid #f9f9f9;
      padding: 0 40rpx;
    }
    .msg {
      display: flex;
      width: 100%;
      height: 100rpx;
      line-height: 100rpx;
      padding: 0 20rpx;
      box-sizing: border-box;
      border-bottom: 1rpx solid #e9e9e9;
      span:nth-child(1) {
        width: 315rpx;
        display: inline-block;
        white-space:nowrap;
        text-overflow:ellipsis;
        overflow:hidden;
      }
      span {
        // margin: 0 20rpx;
        margin-right: 20rpx;
      }
    }
    .opearet {
      width: 100%;
      height: 100rpx;
      padding: 0 20rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .checked-image {
        width: 48rpx;
        height: 48rpx;
        margin:0 20rpx 0 0;
        vertical-align: middle;
      }
    }
    .edit {
      span {
        margin: 0 10rpx;
      }
      img {
        width: 40rpx;
        height: 40rpx;
        vertical-align: middle;
      }
    }
  }
  .bottom {
    height: 120rpx;
    padding: 0rpx 40rpx 40rpx 40rpx;
    box-sizing: border-box;
    // background-color: #ddd;
    p {
      // margin: 20rpx 40rpx;
      background: rgba(255, 255, 255, 1);
      border-radius: 4rpx;
      border: 1px solid rgba(160, 183, 237, 1);
      font-size: 36rpx;
      color: rgba(74, 113, 232, 1);
      line-height: 90rpx;
      text-align: center;
    }
  }
}
.modal {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0,0,0,.7);
    opacity: 1;
    z-index: 100;
    .out {
      height: 412rpx;
      border-radius: 15rpx;
      width: 650rpx;
      background: #fff;
      z-index: 999;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-top: -206rpx;
      margin-left: -325rpx;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .top {
        flex: 1;
        padding: 110rpx 48rpx 0 48rpx;
        text-align: center;
        span {
          font-size: 34rpx;
          font-family:PingFangSC-Regular,PingFangSC;
          font-weight:400;
          line-height:48rpx;
        }
      }
      .btm {
        height: 100rpx;
        line-height: 100rpx;
        display: flex;
        font-size:34rpx;
        font-family:PingFangSC-Regular,PingFangSC;
        font-weight:400;
        .sure {
          background:#4A64EA;
          color: #fff;
        }
        span {
          flex: 1;
          text-align: center;
        }
        span:nth-child(1) {
          background: #f9f9f9;
        }
        span:nth-child(2) {
          background:#4A64EA;
          color: #fff;
        }
      }
    }
  }
</style>
